<template>
  <dashboard-layout>
    <!-- 左侧面板 -->
    <template #left-panel>
      <placeholder-left-panel>
      </placeholder-left-panel>
    </template>

    <!-- 中间内容区 -->
    <template #center-content>
      <time-slider />
    </template>

    <!-- 右侧面板 -->
    <template #right-panel>
      <right-panel>
        <rainfall-panel />
        <rainfall-analysis />
        <forecast-records />
      </right-panel>
    </template>

    <!-- 导航项 -->
    <template #nav-items>
      <div class="nav-item" :class="{ active: activeNav === 'rain' }" @click="handleNavChange('rain')">
        <el-icon><Cloudy /></el-icon>
        <span>雨情预报</span>
      </div>
      <div class="nav-item" :class="{ active: activeNav === 'water' }" @click="handleNavChange('water')">
        <el-icon><Histogram /></el-icon>
        <span>水沙预报</span>
      </div>
    </template>
  </dashboard-layout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Cloudy, Histogram } from '@element-plus/icons-vue'
import DashboardLayout from '@/layouts/DashboardLayout.vue'
import RightPanel from '@/components/RightPanel.vue'
import PlaceholderLeftPanel from '@/components/PlaceholderLeftPanel.vue'
import TimeSlider from './components/TimeSlider.vue'
import RainfallPanel from './components/RainfallPanel.vue'
import RainfallAnalysis from './components/RainfallAnalysis.vue'
import ForecastRecords from './components/ForecastRecords.vue'

const activeNav = ref('rain')

const handleNavChange = (type: string) => {
  activeNav.value = type
  console.log('Navigation changed:', type)
}
</script>

<style lang="scss" scoped>
.forecast-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #1a1f3d;
}

.map-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.content-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  
  .nav-wrapper {
    flex: none;
    width: 100%;
    pointer-events: auto;
    background: linear-gradient(to bottom,
      rgba(13, 19, 35, 0.8) 0%,
      rgba(13, 19, 35, 0.6) 50%,
      rgba(13, 19, 35, 0) 100%
    );
    z-index: 2;
  }
  
  .main-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    height: 100%;
    position: relative;
    z-index: 2;
    
    .center-area {
      flex: 1;
      position: relative;
      padding: 16px;
    }
    
    :deep(.right-section) {
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      pointer-events: auto;
    }
  }
}

:deep(*) {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(0, 0, 0, 0.1);
  
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
  }
  
  &::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    
    &:hover {
      background: rgba(255, 255, 255, 0.3);
    }
  }
}

.center-content {
  height: 100%;
  position: relative;
}
</style> 